<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr />
		<textarea placeholder="请输入评论内容" maxlength="120" v-model="msg" ></textarea>
		<!-- <mt-button type="primary" size="large" @click="postComment">发布</mt-button> -->
		<mt-button type="primary" size="large" @click="postfabu">发布</mt-button>

		<div class="cmt-list">
			<div class="cmt-item" v-for="(item, i) in xiaoxi" :key="item.add_time">
				<div class="cmt-title">第{{ i + 1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time | dateFormat }}</div>
				<div class="cmt-body">{{ item.content }}</div>
			</div>
		</div>
		<!-- <mt-button  type="default" size="large" plain @click="getMore" >查看更多</mt-button> -->
		<mt-button type="default" size="large" plain @click="getMorex">查看更多</mt-button>
		<mt-button type="default" size="large">没什么用的按钮</mt-button>
	</div>
</template>

<script>
var xiaoxi = [
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:34.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:35.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:36.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:37.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:38.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:39.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-04-16T04:05:33.000Z",content:"锄禾日当午 都是人名哦"}
]
var xx = [
	{user_name: "匿名用户",add_time:"2015-03-16T04:05:34.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-05-16T04:05:35.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-06-16T04:05:36.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-07-16T04:05:37.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-08-16T04:05:38.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-09-16T04:05:39.000Z",content:"锄禾日当午 都是人名哦"},
	{user_name: "匿名用户",add_time:"2015-02-16T04:05:33.000Z",content:"锄禾日当午 都是人名哦"}
]
import { Toast } from "mint-ui"
export default {
	data() {
		return {
			pageindex:1,
			comments:[],
			xiaoxi,
			msg: ''
		}
	},
	created() {
		// this.getComments()
	},
	methods: {
		getComments() {
			this.$http
				.get("api/getcomments/" + this.id +"?pageindex="+ this.pageindex)
				.then(result => {
					if (result.body.status === 0) {
						// this.comments = result.body.message
						// 数组的拼接
						this.comments = this.comments.concat( result.body.message)
					}else{
						Toast("获取评论失败")
					}
				})
		},
		getMore() {
			this.pageindex ++
			this.getComments()
		},
		getMorex() {
			this.xiaoxi = this.xiaoxi.concat(xx)
		},
		postComment() {
			// 校验是否为空
			if(this.msg.trim().length === 0 ){
				return Toast("评论内容为空")
			}


			// 发表评论
			// 参数一：请求的url地址
			// 参数2：提交给服务器的数据对象 {content: this.msg}
			// 参数3：提交时候，表单中数据的格式 { emulateJSON = true }
			this.$http
			.post("api/postcomment/" + this.$route.parmas.id, {
				content: this.msg.trim()
			})
			.then(function(result) {
				if(result.body.status === 0){
					//拼接出一个评论对象
					var cmt = {
						user_name: '匿名用户',
						add_time:Date.now(),
						content:this.msg 
						}
					this.comments.unshift(cmt)
					this.msg = ""
				}
			})
		},
		postfabu() {
			if(this.msg.trim().length === 0 ){
				return Toast("评论内容为空")
			}
			var cmt = {
				user_name: '匿名用户',
				add_time:Date.now(),
				content:this.msg 
				};
				this.xiaoxi.unshift(cmt)
				this.msg = ""
			
			
		}
	},
	props: ["id"]
}
</script>

<style lang="scss" scoped="scoped">
.cmt-container {
	h3 {
		font-size: 18px;
	}
	textarea {
		font-size: 0.875rem;
		height: 5.3125rem;
		margin: 0;
	}
	.cmt-list {
		margin: 5px 0;
		.cmt-item {
			font-size: 0.8125rem;
			.cmt-title {
				line-height: 35px;
				background-color: #ccc;
			}
			.cmt-body {
				line-height: 35px;
				text-indent: 2em;
			}
		}
	}
}
</style>
